import React, { useEffect, useState } from 'react'
import { Table, Space, Radio, Switch, Popconfirm, message, Button, Modal, Input, Pagination, Select, Form, Option } from 'antd';

// import { httpGetBulk, httpDelOrders, httpDelBulk } from '../../api/bulk'
import { httpGetAudit, httpDelAudit, httpEditAudit } from '../../api/audit'
import { PropertySearch } from '../../components'
const Audit = () => {
  const { Option } = Select;

  // 数据
  const [data, setData] = useState([]);
  const [pageCode, setPageCode] = useState(1);
  const [pageSize, setPageSize] = useState(4);
  const [total, setTotal] = useState(0);//总页数
  //  搜索的内容
  const [one, setOne] = useState('');
  const [two, setTwo] = useState('');
  const [three, setThree] = useState('');
  const [four, setFour] = useState('');
  // 状态
  const [state, setState] = useState('')
  // const [status, setStatus] = useState('')//状态
  // const [value, setValue] = useState('')//搜索
  const [isModalOpen, setIsModalOpen] = useState(false);//弹框

  // 获取按钮组值
  const [mode, setMode] = useState('')
  const [name, setName] = useState('')
  const [title, setTitle] = useState('')//
  const [area, setArea] = useState('')//公司
  const [sum, setSum] = useState('')//新房
  const [sort, setSort] = useState('')//二手房
  const [status, setStatus] = useState('')//状态
  const [isText, setIsText] = useState(true); //add/edit
  const [id, setId] = useState(); //编辑id
  const columns = [
    {
      title: '序号',
      width: 30,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
    },
    {
      title: '小区名称',
      width: 60,
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '标题',
      width: 50,
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '面积',
      width: 50,
      dataIndex: 'area',
      key: 'area',
    },
    {
      title: '总价',
      width: 20,
      dataIndex: 'sum',
      key: 'upTime',
    },
    {
      title: '排序',
      width: 80,
      dataIndex: 'sort',
      key: 'sort',
    },
    {
      title: '状态',
      width: 80,
      dataIndex: 'status',
      key: 'status',
      render: (_, { status, id }) => (
        <div>
          {status === 'true' ? '通过' : '未通过'}
        </div>
      )
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 90,
      render: (_, record) => (
        <Space size="middle">
          <a >审核</a>
          <a onClick={() => showModal(true, record)}>编辑</a>
          <Popconfirm title="确定删除吗?" onConfirm={() => handleDelete(record.id)}>
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    getData()
  }, [pageCode, one, two, three, four,status])

  // 获取团购数据
  const getData = async () => {
    const res = await httpGetAudit('/audit', { pageCode, pageSize, one, two, three, four, status:`${status}` });
    setData(res.data.list)
    setTotal(res.data.total)
  }
  // 删除
  const handleDelete = async (id) => {
    console.log(11)
    const res = await httpDelAudit("/delAudit", { id })
    if (res.data.code === 200) {
      message.success(res.data.msg);
      getData()
    } else {
      message.warning(res.data.msg);
    }

  }
  // 下拉框
  const handleChange = (value) => {
    setTwo(value)
  }
  // 搜索
  // const Search = () => {
  //   setValue(one)
  //   setStatus(two);
  // }
  // 搜索
  const getValueFromSon = (param) => {
    console.log(param, 'ggg')
    setOne(param.one)
    setTwo(param.two)
    setThree(param.three)
    setFour(param.four)
  }
  // page页码改变
  const onPageChange = (page) => {
    setPageCode(page)
  };
  // 弹框
  const showModal = (type, obj) => {
    setIsText(type)
    setIsModalOpen(true);
    // 添加
    if (type) {
      // 编辑
      setName(obj.name)
      setTitle(obj.title)
      setArea(obj.area)
      setSum(obj.sum)
      setSort(obj.sort)
      setStatus(obj.status)
      setId(obj.id)
    }


  };
  // tab切换改变销售还是租赁
  const changeState = (e) => {
    console.log(e.target.value)
    if (e.target.value === '全部') {
      setStatus('')
    } else if (e.target.value === '审核通过') {
      setStatus(true)
    } else {
      setStatus(false)
    }
  }
  // 确认按钮
  const handleOk = async () => {
    if (isText) {
      const res = await httpEditAudit('/editAudit', { name, title, sum, sort, area, status, pageCode, pageSize, id })
      if (res.data.code === 200) {
        getData();
        message.success(res.data.msg);
      } else {
        message.warning(res.data.msg);
      }
    }
    setIsModalOpen(false);
  }
  // 弹框关闭
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <div style={{ display: 'flex', marginBottom: '20px', marginLeft: '10px' }}>
        <PropertySearch sendValueToFather={getValueFromSon.bind(this)} />
      </div>
      <div>
        <Radio.Group style={{ margin: '10px' }} onChange={changeState} defaultChecked={true} defaultValue='全部'>
          <Radio.Button value="全部" >全部</Radio.Button>
          <Radio.Button value="审核通过">审核通过</Radio.Button>
          <Radio.Button value="审核未通过">审核未通过</Radio.Button>
        </Radio.Group>
      </div>
      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        bordered
        pagination={false}
      />
      {/* 分页 */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Pagination current={pageCode} total={total} pageSize={pageSize} onChange={onPageChange} />
      </div>

      {/* 弹框 */}

      <Modal title={isText} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>
          小区名称: <Input style={{ width: '250px' }} value={name} onChange={(e) => setName(e.target.value)} />
        </p>
        <p>手机号: <Input style={{ width: '250px' }} value={title} onChange={(e) => setTitle(e.target.value)} /></p>
        <p>公司: <Input style={{ width: '250px' }} value={area} onChange={(e) => setArea(e.target.value)} /></p>
        <p>新房: <Input style={{ width: '250px' }} value={sum} onChange={(e) => setSum(e.target.value)} /></p>
        <p>二手房: <Input style={{ width: '250px' }} value={sort} onChange={(e) => setSort(e.target.value)} /></p>
        <p>状态: <Input style={{ width: '250px' }} value={status} onChange={(e) => setStatus(e.target.value)} /></p>
      </Modal>
    </div>
  )
}
export default Audit;
